<template>
  <div>
    <template v-for="item in subMenu">
      <el-submenu v-if="item.children&&item.children.length>0" :index="item.title">
        <template slot="title">
          <router-link :to="item.link" tag="span" v-if="item.link!=null">
            <img :src = "item.icon" alt="" v-if="item.icon!=null"/>
            {{item.title}}
          </router-link>
          <span v-else >
            <img :src = "item.icon" alt="" v-if="item.icon!=null"/>
            {{item.title}}
          </span>
        </template>  
        <NavMenu :subMenu='item.children'></NavMenu>
      </el-submenu>
      <el-menu-item v-else :index="item.title">
        <router-link :to="item.link" tag="span" v-if="item.link!=null">
          <img :src = "item.icon" alt="" v-if="item.icon!=null"/>
          {{item.title}}
        </router-link>
        <span v-else >
          <img :src = "item.icon" alt="" v-if="item.icon!=null"/>
          {{item.title}}
        </span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  props: {
    subMenu: {
      type: Array
    }
  }
}
</script>

